<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插槽的基本使用</title>
  <style>
    #app {
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="app">
    <!-- 因为该组件预留slot插槽的原因, 所以此按钮会自动的放入预留的slot插槽中 -->
    <cpn>
      <button>按钮</button>
    </cpn>
    <!-- 如果在预留插槽中写了多个元素的话, 会全部替换 -->
    <cpn>
      <i>我是i标签</i>
      <span>我是span</span>
      <p>我是段落标签</p>
    </cpn>
    <cpn>
      <span>我是个span标签哦~</span>
    </cpn>

    <!-- 因为写了默认插槽, 所以为按钮时不需要在重新写按钮放入预留插槽中 -->
    <cpn></cpn>
  </div>


  <template id="cpn">
    <div>
      <h3>我是子组件</h3>
      <p>你像天外来物一样求之不得, 你在世俗里的名字不重要了~</p>
      <!-- 下面的标签我想预留出来, 可能是span、button、i不等 -->
      <!-- 1. 这里使用slot插槽预留 -->
      <!-- <slot></slot> -->

      <!-- 2. 如果大多数的情况下显示的是一个固定的按钮, 少部分情况才替换, 这时我们可以给插槽设置一个默认值 -->
      <slot>
        <button>按钮</button>
      </slot>
      <hr>
    </div>
  </template>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {},
      components: {
        cpn: {
          template: '#cpn'
        }
      }
    })
  </script>
</body>

</html>